<template>
  <div class="shoplist">
    <ul>
    	<li v-for="item in shoplist" :key="item.id">
			<img :src="item.src" alt="">
			<div>
				<p>{{item.title}}</p>
				<p class="price">¥ {{item.price}}</p>
				<button @click="add(item)">加入购物车</button>
			</div>
		</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ShopList',
  // computed: {//shoplist的数据放在store里面进行集中管理，可以在组件里面直接通过computed获取
	 //  shoplist(){
		//   return this.$store.state.shoplist;
	 //  }
  // },
  computed: mapState(['shoplist']), //每个计算属性都要写个方法太麻烦了，vuex提供里一个辅助函数mapState可以简化代码
  methods: {
	  add(item){
		  this.$store.commit('add',item); //通过提交一个mutation来改变购物车的数据
	  }
  }
}
</script>

<style scoped>
	li{
		list-style: none;
		border-bottom: 1px dashed #ccc;
		position: relative;
	}
	li div{
		display: inline-block;
		position: absolute;
		top: 20px;
		line-height: 30px;
		font-size: 14px;
	}
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 20px 5px 10px;
	}
	.shoplist{
		padding-bottom: 50px;
	}
	.price{
		color: #f00;
	}
	button{
		background-color: coral;
		color: white;
		border: none;
		padding: 5px;
	}
</style>
